<template>
  <!--授权弹出层-->
  <view>
    <up-popup
        :show="show"
        :round="10"
        :closeOnClickOverlay="true"
        @close="close"
        @open="open">

      <view class="score-page" v-if="room!=null">
        <!-- 抽水展示 台费规则：0：无台费，1：满x抽y，2：百分比 -->
        <view class="tax-info" v-if="room.taiwanFee!==0">
          <text v-if="room.taiwanFee==1">台费({{ '满' + room.fullVal + '抽' + room.deductVal }} MAX:{{
              room.taiwanFeeMax
            }}): {{ room.taiwanFeeValue }}
          </text>
          <text v-if="room.taiwanFee==2">台费({{ room.percentValue }}% MAX:{{ room.taiwanFeeMax }}): {{
              room.taiwanFeeValue
            }}
          </text>
        </view>
        <!-- 用户列表 -->
        <view class="user-list" v-if="roomUser">
          <view class="user-card" v-for="user in roomUser" :key="user.id">
            <view class="avatar-container">
              <image :src="proxy.$tool.getResources(user.avatar)" class="avatar" mode="aspectFill"></image>
            </view>
            <view class="user-info">
              <text class="user-name">{{ user.name }}</text>
              <text class="user-score">分数: {{ user.score }}</text>
            </view>
          </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import {ref, defineProps, getCurrentInstance, defineEmits} from 'vue';
import {useStore} from "vuex";

const {proxy} = getCurrentInstance();
const store = useStore();
// 定义接收的参数
const props = defineProps({
  //是否关闭底部的导航
  isCloseBar: {
    type: Boolean,
    required: false, // 表示必须传递
    default: true,    //默认关闭
  },
});


//当前房间
const room = ref(null);
//房间用户
const roomUser = ref(null);

//定义emit触发类型，回调给父组件
const emit = defineEmits(['ok']);

const show = ref(false);

// 打开弹窗并传入 item
const open = (item) => {
  if (item == null) {
    return;
  }
  room.value = item;
  findScore();
  if (props.isCloseBar) {
    uni.hideTabBar();
  }
}

// 关闭弹窗
const close = () => {
  show.value = false;
  if (props.isCloseBar) {
    uni.showTabBar();
  }
}

/**
 * 查询当前房间得分情况
 */
const findScore = () => {
  proxy.$request.get(`/bus-room/get-by-id/${room.value.roomId}`).then(res => {
    roomUser.value = res.roomUsers;
    show.value = true;
  })
}

defineExpose({
  open
})
</script>

<style scoped lang="scss">
.score-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  background-color: #f0f0f0;
  max-height: 70vh;
  .room-info {
    width: 100%;
    text-align: left;
    margin-bottom: 20px;
  }

  .room-id {
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }


  .tax-info {
    font-size: 16px;
    color: #ff0000;
    margin-bottom: 10px;
  }

  .user-list {
    display: flex;
    flex-direction: column; /* 一列一个用户 */
    align-items: flex-start; /* 靠左对齐 */
    width: 100%;
    margin-bottom: 30px;
    overflow-y: auto;

    .user-card {
      display: flex;
      flex-direction: row; /* 水平排列头像和信息 */
      align-items: center; /* 垂直居中 */
      width: 100%;
      text-align: left; /* 文本左对齐 */
      margin-bottom: 20px;
      padding: 10px;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 8px;
      .avatar-container {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 15px; /* 头像和信息之间的间距 */
        border: 2px solid #ccc;
      }

      .avatar {
        width: 100%;
        height: 100%;
      }

      .user-info {
        display: flex;
        flex-direction: column; /* 姓名和得分竖着排列 */
        align-items: flex-start; /* 姓名和得分靠左 */
        justify-content: center; /* 上下居中 */
        width: 110px;
        white-space: nowrap; /* 禁止文本换行 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 可选，超出部分用省略号表示 */

        .user-name {
          font-size: 16px;
          font-weight: bold;
        }

        .user-score {
          font-size: 14px;
          color: #888;
        }
      }

    }
  }


}

</style>
